import pao = require('../pao/public');
import paoClient = require('../pao/client/client');
import paoControls = require('../pao/client/controls');
import report = require('../pao/client/report');

let moduleName = "pao.test";

export let cmd_city_population = new pao.dataCommandInfo();
cmd_city_population.id = "cmd_city_population";
cmd_city_population.name = "城市人口";
cmd_city_population.sql = `SELECT 
t.name AS 'cityname',
t.district,
t.population,
c.name AS 'countryname'
FROM
world.city t,
world.country c
WHERE
t.CountryCode = c.Code
    AND {0}`;
let datafilter = new pao.baseDataFilter()
    .and(new pao.sqlFilter("countryname", "c.name = ?", "国家"),
    new pao.sqlFilter("district", "t.district = ?", "省份"));
cmd_city_population.dataFilter = [];
cmd_city_population.dataFilter.push(datafilter);

@pao.addon("柱状图", "柱状图", moduleName)
@paoClient.template("views/barView.html")
export class barView extends paoClient.baseView {

    $search?: JQuery = undefined;
    $countryname?: JQuery = undefined;
    $district?: JQuery = undefined;
    $tableReport?: JQuery = undefined;

    private startIndex?: number = 0;
    private maxCount?: number = 10;

    onAfterBind?() {
        let that = this;
        this.$search.click(() => {
            this.$search.button('loading');
            //this.$search.button('reset'); 
            this.$tableReport.find('tbody').html("");
            that.onSearch();
        })
    }

    /**
     * 查询
     */
    onSearch?() {
        let countryname = this.$countryname.val();
        let district = this.$district.val();
        let params = {};
        if (countryname) {
            params['countryname'] = countryname;
        }
        if (district) {
            params['district'] = district;
        }
        paoClient.asyncJsonCall("http://localhost:3000/remoteCall",
            "example",
            "query",
            ["cmd_city_population", params, this.startIndex, this.maxCount],
            (result) => {
                let dataTable = <pao.dataTable>result;
                try {
                    if (dataTable && dataTable.rows && dataTable.rows.length > 0) {
                        let hasThead = this.$tableReport.find('th');
                        let tbody = $('<tbody></tbody>');
                        if (hasThead.length == 0) {
                            let thead = $('<thead></thead>');
                            let tr = $('<tr></tr>');
                            for (let key in dataTable.columns) {
                                let column = <pao.dataColumn>dataTable.columns[key];
                                let th = $(`<th>${column.caption}</th>`);
                                th.appendTo(tr);
                            }
                            tr.appendTo(thead).appendTo(this.$tableReport);
                        }
                        for (let index in dataTable.rows) {
                            let dataTr = $('<tr></tr>');
                            for (let key in dataTable.rows[index]) {
                                let td = $(`<td>${dataTable.rows[index][key]}</td>`);
                                td.appendTo(dataTr);
                            }
                            dataTr.appendTo(tbody);
                        }
                        tbody.appendTo(this.$tableReport);
                    }
                } catch (e) {
                    console.error(e);
                } finally {
                    this.$search.button('reset');
                }
            },
            (error) => {
                console.error(error);
            });
    }
}

